import { Dimensions, ScrollView, Text, View } from 'react-native'
import { withNavigationItem } from 'hybrid-navigation'
import { useRef } from 'react'

export default withNavigationItem({ titleItem: { title: '布局' } })(AnimationPage)

export function AnimationPage() {
  const screenWidth = useRef<number>(Dimensions.get('window').width)

  return (
    <ScrollView>
      <View style={{ flex: 1, flexDirection: 'column', alignItems: 'stretch' }}>
        <Text>Flex布局</Text>
        <View
          style={{
            display: 'flex',
            flexDirection: 'row',
            backgroundColor: '#ff0000',
            height: 300,
            justifyContent: 'space-evenly',
            flexWrap: 'nowrap',
          }}>
          <View style={{ backgroundColor: '#F0FF00', height: 100, width: 50, margin: 10 }} />
          <View style={{ backgroundColor: '#00F000', height: 100, width: 100, margin: 10 }} />
          <View style={{ backgroundColor: '#000F00', height: 100, width: 80, margin: 10 }} />
          {/*<View style={{ backgroundColor: '#0000F0', height: 100, width: 80, flexGrow: 0, margin: 10 }} />*/}
        </View>
        <Text>Position</Text>
        <View
          style={{
            display: 'flex',
            flexDirection: 'row',
            backgroundColor: '#ff0000',
            height: 300,
          }}>
          <View
            style={{ position: 'absolute', bottom: 0, backgroundColor: '#000000', height: 100, width: 50, margin: 10 }}
          />
          <View
            style={{ position: 'relative', top: 20, backgroundColor: '#0000FF', height: 100, width: 50, margin: 10 }}
          />
          <View
            style={{
              position: 'relative',
              top: 40,
              left: 50,
              backgroundColor: '#0000FF',
              height: 100,
              width: 50,
              margin: 10,
            }}
          />
          <View style={{ position: 'relative', backgroundColor: '#0000FF', height: 100, width: 50, margin: 10 }} />
        </View>
      </View>
      <Text>ScrollView</Text>
      <ScrollView horizontal={true} alwaysBounceHorizontal={true} pagingEnabled={true}>
        <View style={{ backgroundColor: '#F0FF00', height: 150, width: screenWidth.current }} />
        <View style={{ backgroundColor: '#00F000', height: 150, width: screenWidth.current }} />
        <View style={{ backgroundColor: '#000F00', height: 150, width: screenWidth.current }} />
        <View style={{ backgroundColor: '#0000F0', height: 150, width: screenWidth.current }} />
      </ScrollView>
    </ScrollView>
  )
}
